<template>
	<span v-if="rootVisible" ref="rootRef">
		<slot></slot>
	</span>
	<template v-else>
		<template v-if="isEllipsis">
			<a-tooltip :title="content">
				<slot></slot>
			</a-tooltip>
		</template>
		<template v-else>
			<slot></slot>
		</template>
	</template>
</template>

<script setup name="ellipsis">
import { ref, watch, onMounted } from 'vue';
const props = defineProps({
	content: {
		type: String,
		default: ''
	},
	dir: {
		type: String,
		default: 'horizontal'
	}
});
const rootRef = ref(null);
const rootVisible = ref(true);
const isEllipsis = ref(false);
onMounted(() => {
	let el = rootRef.value,
		range = document.createRange();
	range.setStart(el, 0);
	range.setEnd(el, el.childNodes.length);
	if (props.dir == 'horizontal' && range.getBoundingClientRect()['width'] > el.getBoundingClientRect()['width']) {
		isEllipsis.value = true;
	}
	if (props.dir == 'vertical' && range.getBoundingClientRect()['height'] > el.getBoundingClientRect()['height']) {
		isEllipsis.value = true;
	}
	rootVisible.value = false;
});
</script>
